<template>
  <div>
    <!-- <div class="box">
      <div class="list">
        <div class="item"></div>
      </div>
      <div class="list">
        <div class="item"></div>
      </div>
      <div class="list">
        <div class="item"></div>
      </div>
    </div> -->
    <left>

    </left>
    <rigth></rigth>
    <Bottom></Bottom>
  </div>
</template>
<script>
import left from '@/views/Left.vue'
import rigth from '@/views/Right.vue'
import Bottom from './Bottom.vue';
export default {
  data() {
    return {
    }
  },
  components:{
    left,
    rigth,
    Bottom
  }
}
</script>
<style  scoped>
.box {
  position: relative;
  left: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: limegreen;
}
.list {
  margin-top: 10px;
  background-color: lightcoral;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  background-color: brown;
  width: 90%;
  height: 90%;
  margin: 10px;
}
</style>